<template>
    <el-container>
        <el-header>
            <el-col :span="10" class="logo">{{$route.meta.title}}</el-col>
            <el-col :span="14" class="menu">
                <el-menu :default-active="$route.path" mode="horizontal" @select="handleselect">
                    <template v-for="(item,index) in $router.options.routes" v-if="item.name='XXXXX云平台'">
                        <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
                                      v-if="!child.hidden">
                            {{child.name}} |
                        </el-menu-item>
                    </template>
                </el-menu>
            </el-col>
        </el-header>
        <el-main>
            <div>
                <router-view></router-view>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {
            handleselect: function (a, b) {
                this.$router.push(a);
            },
        },
        mounted() {
        }
    }

</script>

<style scoped lang="scss">
    @import '~scss_vars';

    .logo {
        height: 64px;
        line-height: 60px;
        font-size: 22px;
        padding-left: 20px;
        color: #ffffff;
        background-color: $color-primary;
    }

    .menu {
        line-height: 60px;
        padding-right: 20px;
        background-color: $color-primary;
    }

    .el-menu {
        background-color: $color-primary;
        float: right;
    }

    .el-menu--horizontal .el-menu-item {
        float: left;
        height: 60px;
        line-height: 60px;
        margin: 0;
        cursor: pointer;
        position: relative;
        box-sizing: content-box;
        border-bottom: 0px;
        color: darkblue;
        padding: 2px;
        //border-right: 1px solid #444444;
    }

    .el-menu--horizontal .el-menu-item:hover {
        background-color: $color-primary;
    }

    .el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active, .el-menu-item.is-active {
        color: #ffffff;
    }

    .el-main {
        position: absolute;
    }

</style>